import React, { Component} from 'react';
import { connect } from 'dva';
import { message, Modal, Pagination, Popconfirm, Button } from 'antd';
import styles from './../Users.css';
import moment from 'moment';
import Factory from '../../factory';
import * as datetime from '../../../utils/datetime'
import dataEditCreate from '../../addons/DataEdit'
import dataTableCreate from '../../addons/DataTable'
import * as menuService from '../../../services/menus';
import * as common from '../../../utils/common';

const daoName = "IndiFanaFapu";
const ButtonGroup = Button.Group;
const columns = [
  { title: '产品类型', width: 200, sorter: true, dataIndex: 'PutpCaption', key: 'PUTP', dispaly: true, filter: true },
  { title: '产品编号', width: 140, sorter: true, dataIndex: 'PUNO', key: 'PUNO', dispaly: true, filter: true },
  { title: '产品名称', width: 190, sorter: true, dataIndex: 'PUNM', key: 'PUNM', dispaly: true, filter: true },
  { title: '币种', width: 110, sorter: true, key: 'CUCYID', caption: "CUCY.Name", dispaly: true, filter: true },
  { title: '募集始日', width: 110, sorter: true, caption: 'CBDT', key: 'CBDT', dispaly: true, filter: true,render: data => datetime.format(data.CBDT, "yyyy-MM-dd")  },
  { title: '募集止日', width: 110, sorter: true, key: 'CEDT', caption: "CEDT", dispaly: true, filter: true,render: data => datetime.format(data.CEDT, "yyyy-MM-dd") },
  { title: '起息日', width: 110, sorter: true, key: 'BGDT',caption: "BGDT", dispaly: true, filter: true ,render: data => datetime.format(data.BGDT, "yyyy-MM-dd")},
  { title: '到期日', width: 110, sorter: true, key: 'FNDT',caption: "FNDT", dispaly: true, filter: true ,render: data => datetime.format(data.FNDT, "yyyy-MM-dd")},
  { title: '客户收益率(%)', width: 130, sorter: true, dataIndex: 'CUYD', key: 'CUYD', dispaly: true, filter: true },
  { title: '产品中收费率(‰)', width: 140, sorter: true, dataIndex: 'ZSFL', key: 'ZSFL', dispaly: true, filter: true },
];
const controls = [
  { name: 'PUTP', required: true, label: '产品类型', 
    data: [{ value: '1', label: '保证收益理财产品' }, { value: '2', label: '保本浮动收益理财产品' }, { value: '3', label: '非保本浮动收益理财产品' }], 
    grid: 12 / 24, type: "radio-group" },
  { name: 'PUNO', required: true, type: 'text', label: '产品编号', grid: 12 / 24 },
  { name: 'PUNM', required: true, type: 'text', label: '产品名称', grid: 12 / 24 },
  { name: "CUCYID", label: "币种", type: "select", grid: 12 / 24, required: true, dataType: "number", fetch: { daoName: "CUCY", optionTpl: 'Name', valueTpl: "ID" }  },
  { name: 'CBDT', required: true, type: 'date', label: '募集始日', grid: 12 / 24 },
  { name: 'CEDT', required: true, type: 'date', label: '募集止日', grid: 12 / 24 },
  { name: 'BGDT', required: true, type: 'date', label: '起息日', grid: 12 / 24 },
  { name: 'FNDT', required: true, type: 'date', label: '到期日', grid: 12 / 24 },
  { name: 'CUYD', required: true, type: 'number', label: '客户收益率(%)', grid: 12 / 24 },
  { name: 'ZSFL', required: true, type: 'number', label: '产品中收费率(‰)', grid: 12 / 24 },
];
const EditFrom = dataEditCreate(daoName);
const DataTable = dataTableCreate(daoName);
/*对私理财产品*/
class INDI_FANA_FAPUForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataChange: false
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: `${daoName}/setKeyName`,
      payload: { keyName: "NO", permID: this.props.permID }
      
    });
    this.props.dispatch({
      type: `${daoName}/fetch`,
      payload: { daoName, page: 1, pageSize: 30 }
    });
    this.loadOptionData();
  }
  loadOptionData() {
    let options = []
    controls.map(c => {
      if (c.fetch) {
        let f = c.fetch;
        if (c.type === 'cascader-select') {
          f.isCascader = true;
        }
        if (c.type !== 'search') {
          options.push(f);
        }
      }
    })
    if (daoName && options.length > 0) {
      this.props.dispatch({ type: `${daoName}/fetchOptions`, payload: { options } });
    }
  }
  saveData(){
      const len = this.props.selectedRowKeys.length;
      if (len === 0) {
        message.info('请选择要编辑的行，如果选择了多行，则使用最后一次选择！');
        return;
      }
      let ZSFL=0;
      const form = this.refs.findForm.getForm();
      form.validateFields((err, values) => {
        if (!err) {
          if (values.ZSFL === undefined || values.ZSFL === '') {
            message.info('请输入产品中收费率！');
            isOK = false;
          } else {
            ZSFL = Number(values.ZSFL);
          }
        }
      });
      const NO = this.props.selectedRowKeys[0];
      this.props.dispatch({
        type: `${daoName}/UpdateFapuZsfl`,
        payload: { daoName,NO,ZSFL }
      });  
  }

  render() {
    let { showEdit, record, permID, popedomTypes } = this.props;
    const pTypes = popedomTypes[permID]
    const controlsFilter = []
    if(pTypes.indexOf("2")!==-1){
        controlsFilter.push({ name: 'ZSFL', required: false, type: 'text', label: '产品中收费率(‰)', grid: 7 / 24,layout: { labelSpan: 8, wrapperSpan: 14 }})
        controlsFilter.push({ name: 'xg', required: false, type: 'button-group',  grid: 7 / 24,data: [{ value: '1', label: '修改中收费率',onClick: this.saveData.bind(this) }], grid: 5 / 24 })
    }
    return (
      <div className={styles.normal} style={{ background: '#fff', marginTop: -16, padding: '5px 5px' }}>
        <div>
          <div className={styles.create}>  
          <EditFrom ref="findForm" daoName={daoName} controls={controlsFilter} clearItemMargin={true} />
          </div>
          <DataTable ref="fapuTable" daoName={daoName} columns={columns} controls={controls} permID={permID}/>
        </div>
      </div>
    )
  }
}
function mapStateToProps(state) {
  const { showEdit, record, selectedRowKeys, keyName } = state.IndiFanaFapu;
  const { userID, orgID, pOrgID, popedomTypes } = state.menus;
  return {
    userID,
    orgID,
    pOrgID,
    popedomTypes,
    showEdit,
    selectedRowKeys,
    keyName,
    record
  }
}
INDI_FANA_FAPUForm = connect(mapStateToProps)(INDI_FANA_FAPUForm)
export default INDI_FANA_FAPUForm;
let render = (props) => React.createElement(INDI_FANA_FAPUForm, props);
let f = new Factory()
f.set("INDI_FANA_FAPUForm", render)